<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
    <meta charset="utf-8">
    <title>BC显示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!--标准mui.css-->
    <link rel="stylesheet" href="css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="css/app.css"/>

    <link href="css/baiyi.css" rel="stylesheet">
    <script src="js/angular.min.js"></script>
    <script src="js/jquery-1.9.1.min.js"></script>
    <style>
        canvas {
            background-color: black;
            width: 640px;
            height: 320px;
        }

        body{
            background-repeat:no-repeat ;
            background-size:100% 100%;
            background-attachment: fixed;
        }

        #gifImg{
            border: 5px solid black;
        }

    </style>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/requestAnimationFrame.js"></script>
    <script src="js/inline-video.js"></script>

</head>
<body ng-app="dynamicRendering" ng-controller="drCtrl">
<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item" href="index.html">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="quotation.html">
        <span class="mui-icon mui-icon-compose"></span>
        <span class="mui-tab-label">报价单</span>
    </a>
    <a class="mui-tab-item" href="steelStruct.html">
        <span class="mui-icon mui-icon-settings"></span>
        <span class="mui-tab-label">钢结构图纸</span>
    </a>
    <a class="mui-tab-item mui-active">
        <span class="mui-icon mui-icon-starhalf"></span>
        <span class="mui-tab-label">动态效果</span>
    </a>
    <a class="mui-tab-item" href="personalCenter.html">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">个人中心</span>
    </a>
</nav>

<div class="mui-content" style="background-color:rgba(0,0,0,0);">

    <div id="dynamicRendering" class="mui-control-content mui-active">
        <header class="mui-bar mui-bar-nav">
            <input id="imgInp" type="file" hidden/>
            <a href="javascript:void(0)" ng-click="choosePic()" class="mui-pull-left headA">选择背景</a>
            <h1 class="mui-title" style="left: 80px;right: 80px;">动态效果图</h1>
            <a href="javascript:void(0)" ng-click="download()" class="mui-pull-right headA">下载</a>
        </header>
        <img id="backImg" src="img/background.jpg" style="float: left;z-index: -100;position: fixed;top: 0;bottom: 200px;width: 100%">
        <div>

            <div class="headMarginTop"></div>

            <div class="container centerCenter">
                <!--<video width="320" height="176" controls poster="http://www.w3schools.com/images/w3html5.gif" draggable="true"
                       playsinline webkit-playsinline>
                    <source src="media/MV.mp4" type="video/mp4">
                </video>-->
                <img id="gifImg" ng-click="switchVideo()" src="img/gif_1.gif" width="{{width*6}}" height="{{height*6}}" style="position:absolute;left: 0;top: 0;">

            </div>

        </div>


        <div class="footerBars">
            <div class="mui-row">
                <div class="mui-col-xs-6 alignCenter">
                    <h5 class="mui-content-padded">宽度：<span id='block-range-width-val' ng-bind="width"></span></h5>
                    <div class="mui-input-range mui-content-padded">
                        <input type="range" id='block-range-width' ng-model="width" value="{{width}}" min="5" max="50">
                    </div>
                </div>

                <div class="mui-col-xs-6 alignCenter">
                    <h5 class="mui-content-padded">高度：<span id='block-range-height-val' ng-bind="height"></span></h5>
                    <div class="mui-input-range mui-content-padded">
                        <input type="range" id='block-range-height' ng-model="height" value="{{height}}" min="5" max="50">
                    </div>
                </div>
            </div>
        </div>

    </div>

</div>

</div>

</body>
<script src="js/mui.min.js"></script>

<script src="globalVar.js"></script>

<script src="js/jquery-1.9.1.min.js"></script>

<script src="js/html2canvas.js"></script>

<script>

    mui.init({
        swipeBack: false
    });

    var app = angular.module('dynamicRendering', []);
    app.controller('drCtrl', function($scope,$http) {
        $scope.width = 25;
        $scope.height = 25;
        $scope.modelName = "P8";
        $scope.token = "";
        $scope.modelId = 1;

        $scope.token = localStorage.getItem("token");

        $http({
            method: "GET",
            url: url + "/product/types?token="+$scope.token,
        }).then(
            function success(response) {

            },
            function error(response) {
                location.href = "login.html";
            }
        );

        $scope.choosePic = function () {
            $("#imgInp").click()
        };
        
        $scope.download = function () {


            $scope.modelName = $scope.modelName.substring($scope.modelName.length-2,$scope.modelName.length);
            var btnArray = ['否', '是'];
            mui.confirm('是否下载', '动态效果图', btnArray, function(e) {
                if (e.index == 1) {


                    $http({
                        method: "GET",
                        url: url + "/download/removeOldFile?token="+$scope.token
                    }).then(
                        function success(response) {
                            var time = 0;

                            if(response.data.success){
                                for (var i=200;i<2100;i=i+200){
                                    setTimeout(function () {
                                        html2canvas($("body"), {
                                            onrendered: function (canvas) {
                                                var base64url = canvas.toDataURL();
                                                var base64Image = base64url.split(",")[1]
                                                var data = {"base64Image": base64Image}; //base64数据
                                                $http({
                                                    method: "POST",
                                                    url: url + "/download/singlePic?token=" + $scope.token,
                                                    data: data
                                                }).then(
                                                    function success(response) {
                                                        if (response.data.success){
                                                            time++;
                                                            if (time>=10){
                                                                console.log(time);
                                                                var downloadBasePath = url + "/download/dynamicRenderDownload?token=" + $scope.token;
                                                                downloadFile(downloadBasePath)
                                                            }
                                                        }
                                                    },
                                                    function error(response) {
                                                        alert(response.data);
                                                        location.href = "login.html";
                                                    }
                                                );
                                            }
                                        });
                                    }, i);
                                }
                            }
                            console.log(response.data);
                        },
                        function error(response) {
                            alert(response.data);
                            location.href = "login.html";
                        }
                    );


                } else {

                }
            })

        };

        function downloadFile(url) {
            try{
                var elemIF = document.createElement("iframe");
                elemIF.src = url;
                elemIF.style.display = "none";
                document.body.appendChild(elemIF);
            }catch(e){
                location.href = "login.html";
            }
        }

        $scope.switchVideo = function () {
            var gifVal= parseInt($("#gifImg").attr("src").split("_")[1].split(".")[0]);
            gifVal = (gifVal+1)%4;
            var gifSrc = "img/gif_" + gifVal + ".gif";
            $("#gifImg").attr("src",gifSrc);
            console.log(gifSrc)
        }


    });

    //导航
    mui('body').on('click', 'a', function () {
        document.location.href = this.href;
    });


    function readURL(input) {
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#backImg').attr('src', e.target.result);
            };
            reader.readAsDataURL(input.files[0]);
        }
    }
    $("#imgInp").change(function(){
        readURL(this);
    });

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        //移动端鼠标拖动
        var isdrag=false;
        var tx,x,ty,y;
        $(function(){
            document.getElementById("gifImg").addEventListener('touchend',function(){
                isdrag = false;
            });
            document.getElementById("gifImg").addEventListener('touchstart',selectmouse);
            document.getElementById("gifImg").addEventListener('touchmove',movemouse);
        });
        function movemouse(e){
            if (isdrag){
                var n = tx + e.touches[0].pageX - x;
                var m = ty + e.touches[0].pageY - y;
                $("#gifImg").css({"left":n,"top":m});
                return false;
            }
        }
        function selectmouse(e){
            isdrag = true;
            tx = parseInt(document.getElementById("gifImg").style.left+0);
            ty = parseInt(document.getElementById("gifImg").style.top+0);
            x = e.touches[0].pageX;
            y = e.touches[0].pageY;
            return false;
        }

    }else {
        //PC端鼠标拖动
        var offsetX;
        var offsetY;
        var p3 = document.getElementById("gifImg");
        p3.ondragstart=function(e){

            offsetX= e.offsetX;
            offsetY= e.offsetY+50;
            console.log(offsetX+"-"+offsetY);
        }
        p3.ondrag=function(e){
            console.log('事件源p3拖动中');
            var x= e.pageX;
            var y= e.pageY;
            //drag事件最后一刻，无法读取鼠标的坐标，pageX和pageY都变为0
            if(x==0 && y==0){
                return; //不处理拖动最后一刻X和Y都为0的情形
            }
            x-=offsetX;
            y-=offsetY;

            p3.style.left=x+'px';
            p3.style.top=y+'px';
        }
    }









</script>
</html>
